<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /** {*/
        /*padding: 0px;*/
        /*margin: 0px;*/
        /*}*/
        #canvas {
            border: 1px solid red;
            margin: 0px;
        }

        #box {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            float: right;
            margin-right: 800px;
        }

        #box1 {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            float: right;
            margin-right: 580px;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="800" height="500">当前浏览器不支持canvas，请更换浏览器使用！</canvas>
<button>draw</button>

<div id="box"></div>
<div id="box1"></div>
</body>
</html>
<script>
    var box = document.getElementById("box");
    var box1 = document.getElementById("box1");
    var canvas = document.getElementById("canvas");//获取到canvas元素
    var context = canvas.getContext("2d");//获取上下文的环境

    var x, y, x1, y1, f = [], i = -1
    context.moveTo(100, 100);
    context.lineTo(500, 500);
    context.stroke();//绘制
    context.moveTo(130, 130);
    context.lineTo(130, 0);
    context.stroke();//绘制


    function drawRect(cxt, x, y, x1, y1, borderWidth, borderColor, fillColor, t) {
        t ? null : cxt.clearRect(0, 0, canvas.width, canvas.height)
        cxt.beginPath();
        cxt.moveTo(x, y);
        cxt.lineTo(x1, y);
        cxt.lineTo(x1, y1);
        cxt.lineTo(x, y1);
        cxt.closePath();
        cxt.lineWidth = borderWidth;
        cxt.strokeStyle = borderColor;
        cxt.fillStyle = fillColor;
        cxt.fill();
        cxt.stroke();
    }
    function drawPoint(cxt, x, y, w, borderWidth, borderColor, fillColor) {
        cxt.beginPath();
        cxt.moveTo(x - w, y - w);
        cxt.lineTo(x + w, y - w);
        cxt.lineTo(x + w, y + w);
        cxt.lineTo(x - w, y + w);
        cxt.lineWidth = borderWidth;
        cxt.strokeStyle = borderColor;
        cxt.fillStyle = fillColor;
        cxt.closePath();
        cxt.fill();
        cxt.stroke();
    }
    function drawPolygon(cxt, dbl, borderWidth, borderColor, fillColor, t) {
        for (var i = 0; i < dbl.length; i++) {
            drawPoint(cxt, dbl[i].x, dbl[i].y, 2, 1, 'red', 'skyblue')
        }
        cxt.moveTo(dbl[0].x, dbl[0].y)
        for (var i = 1; i < dbl.length; i++) {
            cxt.lineTo(dbl[i].x, dbl[i].y)
        }
        if (t) {
            cxt.closePath();
            cxt.fillStyle = fillColor;
            cxt.fill();
        }
        cxt.lineWidth = borderWidth;
        cxt.strokeStyle = borderColor;
        cxt.stroke();
    }


    var timeId;
    var dbl = [], arr = []
    canvas.ondblclick = function () {
        if (arr.length > 2) {
            drawPolygon(context, arr, 1, 'red', "rgba(0, 0, 0, .1)", true)
            // 这里执行完成闭合之后，清空坐标数组，便于另外新建
            dbl = arr
            arr = []
        }
    }
    canvas.onclick = function (e) {
        clearTimeout(timeId);
        timeId = setTimeout(function () {
            x = e.offsetX
            y = e.offsetY
            if (arr.length >= 3) {
                var CA = z(arr[2].x, arr[2].y, arr[0].x, arr[0].y, arr[1].x, arr[1].y)
                var n1 = z(arr[arr.length - 1].x, arr[arr.length - 1].y, arr[0].x, arr[0].y, x, y) //CA
                var BA = z(arr[1].x, arr[1].y, arr[0].x, arr[0].y, x, y)
                var CB = z(arr[arr.length - 1].x, arr[arr.length - 1].y, arr[arr.length - 2].x, arr[arr.length - 2].y, x, y)
                if (CA === 1) {
                    // 代表第2点在线左边，这时判断第4个点的位置，如果在左边就不允许落点
                    if (n1 === 1 || BA === 1 || CB === 1) {
                        return
                    }
                }
                if (CA === 3) {
                    // 代表第2点在线右边，这时判断第4个点的位置，如果在右边就不允许落点
                    if (n1 === 3 || BA === 3 || CB === 3) {
                        return
                    }
                }
                arr.push({x: x, y: y})
            }
            arr.length < 3 ? arr.push({x: x, y: y}) : null
            drawPolygon(context, arr, 1, 'blue')

        }, 250);

    }

    function z(x, y, x1, y1, x2, y2) {
        if (((x - x1) * (y2 - y1) - (y - y1) * (x2 - x1)) > 0) {
            return 1
        } else if (((x - x1) * (y2 - y1) - (y - y1) * (x2 - x1)) < 0) {
            return 3
        } else {
            return 2
        }
    }
</script>